<template>
    <ItemMusicTop :playlist="state.playlist" />
    <ItemMusicList :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"/>
</template>

<script>
import { useRoute } from 'vue-router';
import { onMounted, reactive } from 'vue';
import { getMusicItemList, getItemList } from '../service/item.js'
import ItemMusicTop from '@/components/home/item/itemMusicTop.vue'
import ItemMusicList from '@/components/home/item/itemMusicList.vue'

export default {
    setup() {
        const state = reactive({
            playlist: {}, //详情
            itemList:[] //歌曲
        });
        onMounted(async () => {
            let id = useRoute().query.id
            //获取歌单详情页
            let res = await getMusicItemList(id);
            state.playlist = res.data.playlist
            //获取歌单的歌曲
            const result = await getItemList(id);
            state.itemList = result.data.songs
            //防止页面刷新,数据丢失,将数据保存到sessionStorage
            sessionStorage.setItem('itemDetail', JSON.stringify(state))
        });
        return { state }



    },
    components: {
        ItemMusicTop,
        ItemMusicList
    }
}




</script>